<template>
  <div class="todo-page-wrapper">
    <div class="task-box" v-if="defaultTagId === 'task'">
      <div class="title-opera">
        <span class="title">流程列表</span>
        <div class="opera-box">
          <span>流程状态:</span>
          <a-select default-value="lucy" v-model="selectVal" style="width: 224px" @change="handleChange">
            <a-select-option value="全部">
              全部
            </a-select-option>
            <a-select-option value="进行中">
              进行中
            </a-select-option>
            <a-select-option value="已完成">
              已完成
            </a-select-option>
            <a-select-option value="已废弃">
              已废弃
            </a-select-option>
          </a-select>
          <a-input-search :allowClear="true" placeholder="请输入搜索关键词" style="width: 224px" v-model="searchVal" @change="searchRes"/>
        </div>
      </div>
      <!-- :columnWidth="contrastData[active].columnWidth || 40"  -->
      <a-spin :spinning='showTable'>
        <common-table data-row-key="oid" :scrollx="true" scrollY="calc(100vh - 621px)" :isRowsSelectVisible="true" :columns="tableColumns" :tableData="searchData"
       @selectedRows="selectedData" @routerPage="routerPage" @routerToProject="routerToProject"></common-table>
      </a-spin>
    </div>
  </div>
</template>
<script>
import commonTable from '@/components/common/commonTable';
// import { getTodoList,getPartDetail } from './todo.js'
export default {
  components: { commonTable },
  data() {
    return {
      defaultTagId: 'task',
      tabPaneData: [
        {
          tagName: '流程',
          tagId: 'process',
          num: 0
        },
        {
          tagName: '任务',
          tagId: 'task',
          num: 10
        }
      ],
      selectVal: '全部',
      searchVal: '',
      tableColumns: [
        {
          displayName: '任务名称',
          name: 'name',
          key: 'name',
          fieldType: 'Input',
          dataType: 'String',
          width: 200,
        },
        {
          displayName: '编号',
          name: 'number',
          key: 'number',
          fieldType: 'Input',
          dataType: 'String',
          width: 270,
          scopedSlots: {
            customRender: "name"
          }
        },
        {
          displayName: '执行人',
          name: 'userName',
          key: 'userName',
          fieldType: 'Input',
          dataType: 'String',
          scopedSlots: {
            filterDropdown: "filterDropdown",
            filterIcon: "filterIcon",
            customRender: "customRender"
          },
        },
        {
          displayName: '提交时间',
          name: 'submitTime',
          key: 'submitTime',
          fieldType: 'Input',
          dataType: 'String',
          width: 150,
        },
        {
          displayName: '执行状态',
          name: 'executeState',
          key: 'executeState',
          fieldType: 'Input',
          dataType: 'String',
        },
        {
          displayName: '执行开始时间',
          name: 'startTime',
          key: 'startTime',
          fieldType: 'Input',
          dataType: 'String',
          width: 150,
        },
        {
          displayName: '执行结束时间',
          name: 'endTime',
          key: 'endTime',
          fieldType: 'Input',
          dataType: 'String',
          width: 150,
        },
        {
          displayName: '错误信息',
          name: 'errorMessage',
          key: 'errorMessage',
          fieldType: 'Input',
          dataType: 'String',
          width: 150,
        },
      ],
      tableData: [],
      searchData:[],
      select: [], // 表格选中
      showTable:false,
    }
  },
  mounted(){
    this.getTodoList();
  },
  methods: {
    //获取待办列表
    getTodoList(){
      this.tableData = [{"number":"13010968_2000252420_000010","submitTime":"2022-03-20 11:36:07.0","executeState":"执行成功","name":"C类另存","errorMessage":"","methodParameter":"13010968","startTime":"2022-03-20 11:36:07.0","endTime":"2022-03-20 11:36:10.0","userName":"gw_liuf79"}];
      this.searchData = this.tableData || [];
      return false;
      this.showTable = true;
      getTodoList().then((res)=>{
        this.showTable = false;
        if(res.data.success){
          this.tableData = res.data.data
          this.searchData = this.tableData || [];
          this.tabPaneData[1].num = this.searchData.length;
        }else{
          this.tableData = []
          this.searchData = [];
          this.tabPaneData[1].num = 0;
        }
      }).catch(()=>{
        this.showTable = false;
      })
    },
    //搜索结构
    searchRes(){
      if(this.searchVal){
        this.searchData = [];
        this.searchData = this.tableData.filter(item=>{
          return JSON.stringify(item).indexOf(this.searchVal)!=-1;
        })
      }else{
        this.searchData = this.tableData;
      }
      this.tabPaneData[1].num = this.searchData.length;
    },
    handleChange(value) {
      if(value=='全部'){
        this.searchData = this.tableData;
      }else{
        this.searchData = [];
        this.searchData = this.tableData.filter(item=>{
          return item.executeState.indexOf(value)!=-1;
        })
      }
      this.tabPaneData[1].num = this.searchData.length;
    },
    selectedData(select) {
      this.select = select
    },
    tabsChange(val) {
      this.defaultTagId = val
    },
    // 操作
    routerPage(val) {
      this.toNav()
      return false;
      getPartDetail({code:val.number||'123123132'}).then(res=>{
        if(res.data.success){
          if(res.data.data){
            // let resultInfo = JSON.parse(res.data.data)[0]
            // console.log(180,resultInfo)
            // sessionStorage.setItem('number',val.number);
            this.resetSetItem('number', val.number);
            // sessionStorage.setItem('oid',resultInfo.id);
            // sessionStorage.setItem('masteroid',resultInfo.masterId);
            this.toNav()
          }
        }else{
          this.$message.error('暂无数据！')
        }
      })
    },
    // 流程名称
    routerToProject(val) {
      this.toNav()
    },
    toNav() {
      this.$router.push('/single/partsBOM')
    }
  }
}
</script>

<style scoped lang="less">
  /deep/ .commonTable{
    margin-top: 11px;
    .ant-table-body{
      min-height: calc(100vh - 370px);
    }
    .ant-table-placeholder{
      min-height: calc(100vh - 370px);
      margin-top: -240px;
      border: none;
    }
  }
 .todo-page-wrapper{
   background: #fff;
   padding: 10px 20px;
   .title-opera{
     display: flex;
     justify-content: space-between;
     align-items: center;
     .title{
      font-size: 18px;
      color: #333333;  
      font-weight: 500;
     }
     .opera-box{
       display: flex;
       align-items: center;
       .ant-select{
         margin: 0 20px;
       }
     }
   }
 }
</style>